import { useState } from 'react';
import ContextTodo, { state } from './../../../../store/contextTodo'
import ContextChild1 from './ContextChild1';
import ContextChild2 from './ContextChild2';
// import ContextChild3 from './ContextChild3';
const ContextParent = () => {
  const [todo, setTodo ] = useState(state)
    const updateList = (item) => {
        // state -> obj -> arrt(某一個屬性)
        /**
        * 更新某个对象下的某个属性的时候：(注意：使用不当会出现其他的属性值被覆盖/或者其他的潜在问题)
        * 
        *  1.创建一个空对象/如果是数组创建一个空数组[...arr]
        *  2.把原来的对象展开到新对象中
        */ 
        let objTodo = {...todo }
        objTodo.todoList.push(item)
        setTodo(objTodo)
    }
    return (<div>
      <ContextTodo.Provider value={{...todo, updateList}}>
         <ContextChild1 />
         <ContextChild2 />
          {/* <ContextTodo.Provider value={{ msg: 'haha', title: '默認標題2'}}>
              <ContextChild3 />
          </ContextTodo.Provider> */}
      </ContextTodo.Provider>
        
    </div> );
}
 
export default ContextParent;